<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="/layui/layui.js"></script>
</head>
<body>
<div class="header_con">
	<div class="header">
		<div class="welcome fl">欢迎来到天天生鲜!</div>
		<div class="fr">
			<div class="login_info fl">
				欢迎您：<em>张 山</em>
			</div>
			<div class="login_btn fl">
				<a href="/index">首页</a>
				<a href="/toLogin" th:if="${session.user==null}">登录</a>
				<span th:if="${session.user!=null}" th:text="'欢迎：'+${session.user.userEmail}" style="color: black"></span>
				<span>|</span>
				<a href="/toRegister">注册</a>
			</div>
			<div class="user_link fl">
				<span>|</span>
				<a href="/toUserCenterInfo">用户中心</a>
				<span>|</span>
				<a href="/carttable/myCart">我的购物车</a>
				<span>|</span>
				<a href="/focustable/myFocus">我的收藏</a>
				<span>|</span>
				<a href="/toUserCenterOrder?currentPage=1&pageSize=4">我的订单</a>
			</div>
		</div>
	</div>
</div>

<div class="search_bar clearfix">
	<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
	<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
	<div class="search_con fr">
		<input type="text" class="input_text fl" name="" placeholder="搜索商品">
		<input type="button" class="input_btn fr" name="" value="搜索">
	</div>
</div>

<!--	<div class="total_count"></div>-->
<ul class="cart_list_th clearfix">
	<li class="col01" style="width: 21%">商品图片</li>
	<li class="col02" style="width: 15%">商品名称</li>
	<!--		<li class="col02">商品单位</li>-->
	<li class="col03" style="width: 20%">商品价格</li>
	<li class="col04" style="width: 9%">数量</li>
	<li class="col05" style="width: 23%">小计</li>
	<li class="col06" style="width: 4%">操作</li>
</ul>
<div th:each="carttables:${carttables}">
	<ul class="cart_list_td clearfix" th:each="goodstableList:${goodstableList}" th:if="${goodstableList.id}==${carttables.goodId}">
		<li class="col01"><input type="checkbox" class="checkb" name="checkone" onclick="countPrice()" th:value="${goodstableList.id}"></li>
<!--								 onclick="checkOne(this)"-->

		<li class="col02" style="width: 12%"><img th:src="'images/'  + ${goodstableList.picture}" ></li>
		<li class="col04" style="width: 25%" th:text="${goodstableList.name}"><br>
			<!--			<li class="col04">500g</li>-->
		<li class="col05" style="width: 10%" id="onePrice" name="onePrice" th:text="${goodstableList.newPrice}"></li>
		<li class="col06">
			<div class="num_add" >
				<a href="javascript:;" class="add fl" onclick="addOne(this)">+</a>
				<input  type="text" class="num_show fl" name="num" th:value="${carttables.num}">
				<a href="javascript:;" class="minus fl" onclick="lessOne(this)">-</a>
			</div>
		</li>
		<li class="col07" style="width: 11%" id="totalPrice" th:text="${goodstableList.newPrice}*${carttables.num}"></li>
		<li class="col08" style="width: 16%"><a th:href="@{/carttable/deleteOneCart(cartId=${carttables.id})}">删除</a></li>
	</ul>
</div>



<ul class="settlements">
	<li class="col01"><input type="checkbox" name="" id="allchecked" checked="" onclick="checkall()"></li>
	<li class="col02">全选</li>
	<li class="col03">合计(不含运费)：<span>¥</span><em id="lastPrice">0</em><br>共计<b id="checkNum">0</b>件商品</li>
	<!--		<li class="col04"><a th:href="@{/carttable/deleteOneCart(cartId=${carttables.id})}">去结算</a></li>-->
	<button type="button" id="btn">提交订单</button>
</ul>

<div class="footer">
	<div class="foot_link">
		<a href="#">关于我们</a>
		<span>|</span>
		<a href="#">联系我们</a>
		<span>|</span>
		<a href="#">招聘人才</a>
		<span>|</span>
		<a href="#">友情链接</a>
	</div>
	<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
	<p>电话：010-****888    京ICP备*******8号</p>
</div>

<script>
	//把全选框初始置为false
	var allchecked=document.getElementById('allchecked');
	allchecked.checked=false;

	//选择商品数量按钮事件
	// 	增加
	function addOne(obj) {
		var nextEL=$(obj).next();
		var numInfo=$(nextEL).val();
		numInfo++;
		var num =$(obj).next().val(numInfo);
		var onePrice = $(obj).parent().parent().prev();
		var Price = onePrice.text();
		Price = parseFloat(Price);
		// alert(Price)
		num = parseFloat(numInfo);
		var all = parseFloat(num * Price);
		var totalPrice = $(obj).parent().parent().next();
		totalPrice.text(all.toFixed(1));
		countPrice();
		// totalPrice.text(all).toFixed(2);
	}

	// 减少
	function lessOne(obj) {
		var prevEL = $(obj).prev();
		var numInfo = $(prevEL).val();
		if (numInfo == 1)
			numInfo = 1
		else {
			numInfo--;
			var num = $(obj).prev().val(numInfo);
			var onePrice = $(obj).parent().parent().prev();
			var Price = onePrice.text();
			Price = parseFloat(Price);
			// alert(Price)
			num = parseFloat(numInfo);
			var all = num * Price;
			var totalPrice = $(obj).parent().parent().next();
			totalPrice.text(all.toFixed(1));
			countPrice();
		}
	}


	function countPrice(){
		var allCheck = $("input[name='checkone']:checked");
		var allPrice = 0;
		var allNum = 0;
		$.each(allCheck,function (i,data){
			var onePirce = $(data).parent().next().next().next().text();

			var num = $(data).parent().next().next().next().next().children().children().next().val();
			allPrice = allPrice + parseFloat(onePirce) * parseInt(num);
			allNum = allNum + parseInt(num);
			var oneAllPirce = parseInt(num) * parseFloat(onePirce);
			$(data).parent().next().next().next().next().next().text(oneAllPirce);

		});
		$("#lastPrice").text(allPrice);
		$("#checkNum").text(allNum);
	}
	function checkall(){
		var allCheck = $("#allchecked").prop("checked");
		var allOneCheck = $("input[name='checkone']");
		$.each(allOneCheck,function (i,data){
			$(data).prop("checked",allCheck);
		})
		countPrice();
	}
	$("#btn").click(function (){
		var arr = new Array();
		var arrNum = new Array();
		$("input[name='checkone']:checked").each(function (index,obj){
			var num = $(obj).parent().next().next().next().next().children().children().next().val();
			console.log(index,obj);
			var id=$(obj).val();
			console.log("id："+id);
			arr.push(id);
			arrNum.push(num);
		});
		arr = arr.join(",");
		arrNum = arrNum.join(",");
		var allPrice =$("#lastPrice").text();
		$.ajax({
			url: "/orderdetail/submitOrder",//随便的地址，还没连后台
			data: {
				"goodIds": arr,
				"goodNums":arrNum,
				"allPrice":allPrice
			},
			dataType:"json",
			type: "post",
			success:function (data){
				if(data.code == 200)
				{
					location.href="/goodstable/settlement?orderId="+data.data
				}else {
					layer.alert(data.message);
				}
			}
		})
	});
</script>

</body>

</html>